<template>
  <view class="operate-container">
    <!-- 输入框 -->
    <view class="comment-box" @click="onCommitClick">
      <my-search placeholderText="评论一句，前排打call"></my-search>
    </view>
    <!-- 点赞 -->
    <view class="options-box">
      <article-praise :articleData="articleData" />
    </view>
    <!-- 收藏 -->
    <view class="options-box">
      <article-collect
        :config="{
          height: 28,
          backgroundColor: '#eeedf4',
          icon: '/static/images/input-icon.png',
          textColor: '#a6a5ab',
          border: 'none'
        }"
        :articleData="articleData"
      />
    </view>
  </view>
</template>

<script>
import mySearch from '../my-search/my-search.vue'
import isLogin from '../../mixin/isLogin'
export default {
  components: { mySearch },
  mixins: [isLogin],
  name: 'article-operate',
  props: {
    articleData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    /**
     *  my-search 点击事件
     */
    onCommitClick() {
      // 登录判定
      const result = this.isLogin()
      if (!result) return
      this.$emit('commitClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.operate-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $uni-bg-color;
  padding: 4px 6px 32px 6px;
  display: flex;
  border-top: 1px solid $uni-bg-color-grey;
  align-items: center;
  .comment-box {
    flex-grow: 2;
  }
  .options-box {
    flex-grow: 1;
  }
}
</style>
